<template>
  <div id="content" class="relative w-full max-w-screen-2xl mx-auto">
    <div class="fixed flex justify-center top-2 left-0 w-4 py-1 z-[60] bg-blue-300/80 hover:bg-blue-500/80 text-slate-50 lg:hidden">
      <button @click.stop="toggleFold">
        <RemixIcon :name="fold?'menu-unfold-line':'menu-fold-line'"></RemixIcon>
      </button>
    </div>
    <div class="lg:flex">
      <Menu :editable="!published" :share="published" @toggleFold="toggleFold" :fold="fold" @menuChange="onMenuChange" :defaultSelected="published"></Menu>
      <div id="contentWrapper" class="min-w-0 w-full flex-auto lg:static lg:max-h-full lg:overflow-visible lg:pl-80">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import Menu from '@/components/navigation/Menu.vue'
import RemixIcon from '@/components/common/RemixIcon.vue'
import { useRouter } from 'vue-router'
const router = useRouter();
const fold = ref(true);
const props = defineProps({
  published: {
    type: Boolean,
    default: false
  }
})
const toggleFold = (float) => {
  if (float && typeof (float) === 'boolean') {
    fold.value = float;
    return;
  }
  fold.value = !fold.value;
}
const onMenuChange = (id, appId) => {
  let path = props.published?'/share':'/books';
  path = id ? `${path}/${id}` : path;
  router.replace({
    path: path,
    query: {
      appId
    }
  })
}
</script>


<style lang="scss"></style>
